import styled from 'styled-components'

export const SliderContainer = styled.span.attrs(({
    theme
}) => theme)
    `   display:inline-block;
        width: 100%;
        height: 8px;
        position:relative;
        border-radius:12px;
        cursor:pointer;
        background:${props => props.activeBackgroundColor};
        .thumb{
            background:#fff;
            position:absolute;
            top:50%;
            transform:translate(-50%,-50%);
            left:0%;
            display:inline-block;
            width:20px;
            font-size:.5rem;
            height:20px;
            text-align:center;
            border-radius:50%;
            cursor:pointer;
        }
`